<template>
  <div>
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
    <van-notice-bar left-icon="volume-o" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" />
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image">
      </van-swipe-item>
    </van-swipe>
    <van-tabs v-model:active="current" color="#62a4f5" animated swipeable>
      <van-tab v-for="index in 4" :key="index" :title="'选项 ' + index">
        <van-card v-for="item in 5" :key="item" num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/ipad.jpeg" @click="toDetail" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import { useRouter } from 'vue-router'

  export default defineComponent({
    setup() {
      const value = ref('')
      const current = ref(0)
      const router = useRouter()
      const images = ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg']
      const toDetail = () => {
        router.push({ path: '/goodsDetail' })
      }
      return {
        value,
        images,
        current,
        router,
        toDetail
      }
    }
  })
</script>

<style></style>
